<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta name="keywords" content="">
<meta name="description" content="">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车-西安黑咖啡网络科技有限公司</title>
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/swiper.min.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/font.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/head.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/nav.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/swiper.min.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/footer.css">
<link rel="stylesheet" href="http://temp.xablackcoffee.com/css/shoppingcart/shoppingCart.css">
<link rel="stylesheet" href="../css/shoppingCart.css">
<link rel="stylesheet" href="../css/swiper.min.css">
<script type="text/javascript" src="http://temp.xablackcoffee.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://temp.xablackcoffee.com/js/swiper.min.js"></script>
<script type="text/javascript" src="http://temp.xablackcoffee.com/js/shoppingcart/shoppingCart.js"></script>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript" src="../js/swiper.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/shoppingCart.js"></script>
<script type="text/javascript" src="../js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="../js/nav.js"></script>
<script type="text/javascript" src="../js/footer.js"></script>
</head>


<body>
    <!-- 头部 -->
    <header>
        <div class="login">
            <div class="login_menu">
                <ul>
                    <li onclick="pageChange(event)"><a href="login.html" target="_blank">登录</a></li>
                    <li onclick="pageChange(event)"><a href="register.html" target="_blank">注册</a>
                    </li>
                    <li onclick="pageChange(event)" id="cartShow"><a class="car"><span
                                class="icon iconfont icongouwuche1"></span> <span style="cursor:pointer">购物车</span>
                            (<span class="cart_count" id="cart_total">0</span>)</a></li>
                </ul>
                <div class="cart_details" style="display:none">
                    <ul id='cart'>
                    </ul>
                    <div class="details_bottom">
                        共<span class="total_money" id="goods_count">0</span>件 合计<span class="total_money"
                            id="goods_amount">0</span>元
                    </div>
                </div>
            </div>
        </div>
        <div class="wraps">
            <div class="toolbar">
                <a class="left" href="http://www.xablackcoffee.com/">
                    <img src="image/logo-new.png" alt="">
                </a>
                <ul id="tab">
                    <li class="indexs" onclick="pageChange(event)"><a href="index.html" target="_self">首页</a></li>
                    <li class="indexs" onclick="pageChange(event)"><a href="serviceItems.html" target="_self">服务项目</a>
                    </li>
                    <li class="indexs" onclick="pageChange(event)"><a href="case.html" target="_self">案例</a></li>
                    <li class="indexs" onclick="pageChange(event)"><a href="product.html" target="_self">产品</a></li>
                    <li class="indexs" onclick="pageChange(event)"><a href="information.html" target="_self">资讯</a></li>
                    <li class="indexs" onclick="pageChange(event)"><a href="commonProblem.html" target="_self">常见问题</a>
                    </li>
                    <li class="indexs" onclick="pageChange(event)"><a href="aboutus.html" target="_self">关于我们</a></li>
                </ul>
            </div>
        </div>

    </header>

    <!-- 中间 -->
    <nav>
        <div class="cart_wrap">
            <div class="page_location">当前位置:<span class="name">购物车</span></div>
            <div id="product_container">
                <div class="list_title">
                    <span class="checkboxs">
                        <input type="checkbox" checked="" id="allChecked">
                        <span>全选</span>

                    </span>
                    <span class="infors">商品信息</span>
                    <span class="prices">单价</span>
                    <span class="numbers">数量</span>
                    <span class="amount">金额</span>
                    <span class="do">操作</span>
                </div>
                <ul class="list" id="cart_list">

                </ul>
                <div class="bottom">
                    <span class="checkboxs">
                        <input type="checkbox" checked="" id="selectAll">
                        <span>全选</span>
                    </span>
                    <!-- <span class="delete" id='deleteAll'>删除</span> -->
                    <span class="choose">已选商品 <span class="total" id="total_count"></span>件</span>
                    <span class="total_amount">合计(不含运费)： <span class="total" id="total_amount"></span></span>
                    <span class="settle_accounts" style="cursor: pointer;" onclick="settleAccounts()">结算</span>
                </div>
            </div>
            <div id="step" style="display:none">
                <!-- <div class="steps" id="current"> -->
                <ul class="steps" id="current">
                    <li>
                        <div class="step">
                            <div class="step_infor active">
                                <div class="stepnumber">1</div>
                                <div class="step_introduce">提交订单</div>
                            </div>
                        </div>
                        <div class="steplines"></div>
                    </li>
                    <li>
                        <div class="step">
                            <div class="step_infor">
                                <div class="stepnumber">2</div>
                                <div class="step_introduce">支付货款</div>
                            </div>

                        </div>
                        <div class="steplines"></div>
                    </li>

                    <li>
                        <div class="step">
                            <div class="step_infor">
                                <div class="stepnumber">3</div>
                                <div class="step_introduce">支付成功</div>
                            </div>
                        </div>
                        <div class="steplines"></div>
                    </li>

                    <li>
                        <div class="step">
                            <div class="step_infor">
                                <div class="stepnumber">4</div>
                                <div class="step_introduce">等待收货</div>
                            </div>
                        </div>
                    </li>
                    <!-- </div> -->
                </ul>
            </div>
            <div id='sure_order' style="display:none">
                <div id="billing_info">
                    <div class="choose_addrsss">
                        <div class="addres_title">请选择收货地址</div>
                        <div class="lists" id="address_lists">
                            <!-- <div class="address_box active">
                                <div>
                                    <div class="address">
                                        <span class="city">陕西西安</span>
                                        <span class="user_name">用户11</span>
                                        <span class="edit" onclick="edit()">修改</span>
                                        <span class="delete" onclick="deleteAddress()">删除</span>
                                    </div>
                                    <div class="address_details">
                                        碑林区文艺路南稍门十字西北角南稍门中贸广场15号楼B座
                                    </div>
                                    <div class="phone">
                                        13256889478
                                    </div>
                                </div>
                            </div>
                            <div class="address_box addew">
                                <div class="add" onclick="modalOpen()">
                                    + 使用新地址
                                </div>
                            </div> -->
                        </div>
                        <div id="addess_more" class="address_more"><span class="icon iconfont iconjiantouxia"
                                onclick="addressMore()"></span></div>
                        <div id="addess_close" class="address_more"><span class="icon iconfont iconshouqi"
                                onclick="addressClose()"></span></div>
                    </div>
                    <div class="order">
                        <div class="order_title">确认订单信息</div>
                        <div class="order_list">
                            <div class="list_title">
                                <span class="product_infor">商品信息</span>
                                <span class="product_price">单价</span>
                                <span class="product_count">数量</span>
                                <span class="product_amount">金额</span>
                            </div>
                            <ul id="order_list">

                            </ul>
                        </div>
                        <div class="bottom">
                            <span class="checkboxs">
                                <!-- <input type="checkbox" checked="" id="checkeds"> -->
                                <!-- <span>全选</span> -->
                            </span>
                            <span class="delete"></span>
                            <span class="choose">已选商品 <span class="total" id="order_counts"></span>件</span>
                            <span class="total_amount">合计(不含运费)： <span class="total" id="order_amounts"></span></span>
                            <span class="settle_accounts" onclick="submitOrder()">提交订单</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="orders_details" style="display:none;margin-bottom:20px;">
                <div class="details_titles">订单详情</div>
                <div class="order_bottom">
                    <span class='order_arr' onclick="back()" id="order_arr"></span> </span>
                    <span class="choose">商品数量 <span class="totals" id="cart_number">0</span>件</span>
                    <span class="total_amount">合计 <span class="total" id="cart_amount">￥0.00</span></span>
                </div>
            </div>
            <div id="pay_type" style="display:none">
                <div class="choosea">请选择支付方式</div>
                <form>
                    <ul class="choose_type" id="payType">
                        <li class="types">
                            <span class="icon iconfont iconyinhangka1"></span>
                            <span class="ali">银行卡支付</span>
                            <input type="radio" name="pay_type" value="银行卡">
                        </li>
                        <li class="types">
                            <span class="icon iconfont iconweixinzhifu"></span>
                            <span class="ali">微信支付</span>
                            <input type="radio" name="pay_type" value="微信">
                        </li>
                        <li class="types">
                            <span class="icon iconfont iconzhifubao"></span>
                            <span class="ali">支付宝支付</span>
                            <input type="radio" name="pay_type" value="支付宝">
                        </li>

                    </ul>
                </form>
                <div id="code">
                    <div>请扫描下方二维码</div>
                    <div class="codes" id="pay_code">
                        <!-- <img src="" alt="付款码" id="qrcode"> -->
                    </div>

                    <!-- <button class='sure_pay'>确认付款</button> -->
                </div>
            </div>
            <div id="success" style="display:none">
                <div class="finish">
                    <img src="image/success.png" alt="">
                </div>
                <div class="pay_suc">
                    支付成功
                </div>
                <div class="pay_infor">您的订单已支付成功，请耐心等待发货</div>
                <div class="sure"> <button class="sure_pay" onclick="finishPay()">确认</button></div>
            </div>
        </div>
        <div class="section_contact_us">
            <div class="section_us">
                <!-- <img src="image/serviceItems/F.png" alt=""> -->
            </div>
        </div>
    </nav>
    <!-- 尾部 -->
    <footer>
        <div class="footer">
            <div class="footer-container">
                <div class="left">
                    <div class="footer-titles">售前咨询</div>
                    <div class="footer-containers">400-0168-029</div>
                    <div class="footer-containers">专业技术咨询</div>
                    <div class="footer-containers">全方位产品解读</div>
                    <div class="footer-containers">成熟解决方案</div>
                    <div class="footer-containers">成功客户案例分享</div>
                </div>
                <div class="middle">
                    <ul>
                        <li class="footer-titles">支持与服务</li>
                        <li class="footer-containers"><a href="serviceItems.html" target="_self">服务项目</a></li>
                        <li class="footer-containers"><a href="case.html" target="_self">案例</a></li>
                        <li class="footer-containers"><a href="product.html" target="_self">产品</a></li>
                    </ul>
                    <ul>
                        <li class="footer-titles">资讯</li>
                        <li class="footer-containers"><a href="information.html" target="_self">资讯</a></li>
                    </ul>
                    <ul>
                        <li class="footer-titles">常见问题</li>
                        <li class="footer-containers"><a href="commonProblem.html" target="_self">常见问题</a></li>
                    </ul>
                    <ul>
                        <li class="footer-titles">关于我们</li>
                        <li class="footer-containers"><a href="aboutus.html" target="_self">关于我们</a></li>
                    </ul>
                </div>
                <div class="right">
                    <div class="footer-titles">关注黑咖啡</div>
                    <img src="image/index/er.png" alt="" style="width:80px;height:80px;">
                </div>
            </div>
            <div class="footer-me">
                <p>版权所有：©2018，西安黑咖啡网络科技有限公司保留所有权力陕ICP<a
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=18005715">备案18005715号</a></p>
                <p>地址：西安市碑林区南稍门中贸广场2单元2307</p>
            </div>
            <div style="position:fixed;bottom:0px;left:0px;z-index:99999999999">
                <span class="icon iconfont iconkefu" style="margin-left:10px;cursor:pointer;color:#fff"
                    onclick="showModel()"></span>
            </div>
        </div>
        <div id="service">
            <iframe src="customerService.html" frameborder="0" id="frams"></iframe>
        </div>
    </footer>
    <!--添加模态框-->
    <div id="modal-box" style="display:none">
        <div class="modal-box">
            <!--顶部-->
            <div class="modal-box-top">
                <div class="modal-box-title" id="creat_address">创建新地址</div>
                <div class="modal-box-title" id="edit_address" style="display:none">修改地址</div>
                <!--关闭按钮 &times;会被转义成乘号（×）看上去就是关闭符号-->
                <!--关闭逻辑-->
                <span onclick="modalClose()" class="modal-close">
                    &times;
                </span>
            </div>
            <!--主体-->
            <div class="modal-box-content">
                <form id="form1">
                    <div class="address_boxs">
                        <div class="add_rows">
                            <span class="add_required">*</span>
                            <span class="add_names">地址信息:</span>
                            <div class="city" id="citys">
                                <select id="ProvinceList" name="province_id" onchange="getCity(this.value)"></select>
                                <select id="AreaList" name="city_id" onchange="getCounty(this.value)"></select>
                                <select id="ContryList" name="county_id"></select>
                            </div>
                            <!-- <input type="text" id='' name="" placeholder="请选择省/市/区"> -->
                        </div>
                        <div class="add_rows">
                            <span class="add_required">*</span>
                            <span class="add_names">详细地址:</span>
                            <input type="text" id='address' name="address" minlength=6 placeholder="请填写详细地址">
                        </div>
                        <div class="add_rows">
                            <span class="add_required">*</span>
                            <span class="add_names">收货人:</span>
                            <input type="text" id='consignee' name="consignee" placeholder="请填写收货人">
                        </div>
                        <div class="add_rows">
                            <span class="add_required">*</span>
                            <span class="add_names">手机号:</span>
                            <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength=11
                                id='consignee_phone' name="consignee_phone" placeholder="请填写手机号">
                        </div>
                        <div class="add_rows">
                            <span class="add_required" style="color:#fff">*</span>
                            <span class="add_names"></span>
                            <input type="checkbox" id='is_default' name="is_default" onclick="setDefualt()"
                                style="width:10px;"><span style="color:#000;
                            font-size:12px;">设为默认收货地址</span>
                        </div>
                        <div class="add_rows">
                            <span class="add_required" style="color:#fff">*</span>
                            <span class="add_names"></span>
                            <span class="sure_pays" onclick="addAddress()">保存</span>
                        </div>
                    </div>
                </form>


            </div>

        </div>
    </div>
    <!----删除模态框-->
    <div id="delete_box" hidden>
        <div class="delete_model">
            <div class="address_title">
                <span class="delete_titles">删除地址</span>
                <span class="delete_close" onclick="cancleAddress()">X</span>
            </div>
            <div class="delete_content">
                <div class="delete_left">
                    <span class="icon iconfont iconjinggao"></span>
                </div>
                <div class="delete_right">
                    <div class="deletes_top">你确定要删除该条地址信息？</div>
                    <div class="deletes">删除地址后地址相关信息将彻底删除，确定删除？</div>
                </div>
            </div>

            <div class="add_rows">
                <span class="cnacel_delete" onclick="cancleAddress()">取消</span>
                <span class="sure_delete" onclick="deleteRow()">删除</span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var shoppingcartList = [];
    var page = window.pageVariable.ShoppingCart;
    var storage = window.sessionStorage;
    var token = storage.getItem('token', token);
    var userInfo = storage.getItem('userInfo', userInfo);
    var shopping_cart_id;
    var ProvinceList = [];
    page.init();
    var step = 1;
    var address;
    var sale_shopping_cart_ids_arr = [];
    var reference_number;
    var amount = 0;
    var channel_id;//支付方式
    var user_id = userInfo.user_id;
    var payment_record_id;//获取支付结果
    getShoppingCart();
    getCartDetails();
    function getShoppingCart() {
        var str = ''
        let total_count = 0;
        let total_amount = 0;
        let total = 0;
        page.getShoppingCart().then(res => {
            shopping_cart_id = res.shopping_cart_id
            if (res && res.length) {
                res.forEach((ele) => {
                    if (!ele.has_create_sale_contract && !res.goods_disabled) {
                        str += '<li class="commodity">' +
                            '<span class="checkboxes" onclick="checkItem()">' +
                            '<input type="checkbox" checked="" class="checkboxs">' +
                            '</span>' +
                            '<div class="infors">' +
                            '<div class="lefts">' +
                            '</div>' +
                            '<div class="rights">' +
                            '<p class="rroduct_name">' + ele.norm_name + '</p>' +
                            '<p class="specification">' + ele.category_name + '</p>' +
                            '</div>' +
                            ' </div>' +
                            '<span class="prices">' + ele.sale_amount + '</span>' +
                            '<div class="numbers">' +
                            '<span class="plus" onclick="subtract(event,' + ele.sale_shopping_cart_id + ')">' + '-</span>' +
                            '<input class="count_value" type="text" value=' + ele.sale_count + ' onblur="getRowTotal(event)">' +
                            '<span class="plus"  onclick="plus(event,' + ele.sale_shopping_cart_id + ')">' + '+</span>' +
                            '</div>' +
                            '<span class="amount">' + ele.sale_amount * ele.sale_count + '</span>' +
                            '<span class="do"  onclick="deleteShoppingCart(' + ele.sale_shopping_cart_id + ')">' + '删除</span>' +
                            '</li>'
                        total_count += ele.sale_count
                        total_amount += ele.sale_amount * ele.sale_count;
                        total = total_amount.toFixed(2);

                    }
                });
                let arr = "";
                if (res && res.length) {
                    // arr = res[0].norm_name + "...>"

                    res.forEach(ele => {
                        if (ele.has_create_sale_contract) {
                            sale_shopping_cart_ids_arr.push(ele.sale_shopping_cart_id)
                        }
                        arr += ele.norm_name

                    })
                }

                $('#cart_list').html(str)
                $('#total_count').text(total_count);
                $('#total_amount').text('￥' + total);
                $("#cart_number").text(total_count);
                $('#cart_amount').text(total);
                $('#order_arr').text(arr + ' >');
            }

        }).catch(err => {
            alert('获取购物车详情--失败')
        })
    }
    var isAddressEdit = false;
    //显示模态框
    function modalOpen() {
        //获取模态框对象   getElementsByClassName获取到的是一个数组对象
        //获取浏览器当前宽高
        let documentWidth = $(window).width();
        let documentHeight = $(window).height();
        //获取模态框宽度
        let modalWidth = $(".modal-box").height();
        let modalHeight = $(".modal-box").width();
        //计算弹出窗口的左上角X的偏移量
        var popX = (documentWidth - modalWidth) / 2 - 200;
        // 计算弹出窗口的左上角Y的偏移量为窗口的高度 - 弹窗高度 / 2 + 被卷去的页面的top
        var popY = (documentHeight - modalHeight) / 2 + $(document).scrollTop();
        //设定窗口的位置
        $(".modal-box").css("top", popY);
        $(".modal-box").css("left", popX);
        //设置为可见
        $('#modal-box').css("display", 'block');
        $("#consignee").val(''),
            $("#consignee_phone").val(''),
            $("#address").val(''),
            $("#is_default").prop("checked", false);
        console.log(isAddressEdit, "修改");
        if (isAddressEdit) {
            $("#creat_address").css("display", 'none');
            $("#edit_address").css("display", 'block');
        } else {
            $("#creat_address").css("display", 'block');
            $("#edit_address").css("display", 'none');
        }
    }
    //模态框关闭
    function modalClose() {
        $('#modal-box').css("display", 'none')
    }
    /***顶部全选*****/
    $("#allChecked").click(function (e) {
        let check = $("#allChecked").prop("checked")
        if (check) {
            $("#cart_list li .checkboxs").prop("checked", true)
            $("#selectAll").prop("checked", true)
        }
        else {
            $("#cart_list li .checkboxs").prop("checked", false)
            $("#selectAll").prop("checked", false)
        }
        getTotal();
    })
    /***底部全选*****/
    $("#selectAll").click(function () {
        let check = $("#selectAll").prop("checked")
        if (check) {
            $("#cart_list li .checkboxs").prop("checked", true)
            $("#allChecked").prop("checked", true)
        }
        else {
            $("#cart_list li .checkboxs").prop("checked", false)
            $("#allChecked").prop("checked", false)
        }
        getTotal();
    })
    /**逐个选中*/
    function checkItem() {
        var item = $(this).parent().find('.checkboxs').length;//获取购物车checkbox的数量
        var item_check = $(this).parent().find('.checkboxs:checked').length;
        if (item == item_check) {
            $("#allChecked").prop('checked', true);
        } else {
            $("#allChecked").prop('checked', false);
        }
        getTotal();
    }
    /**删除购物车**/
    $('#deleteAll').click(function () {
        page.delate(shopping_cart_id).then(res => {
            if (res) {
                alert("该商品已删除！");
                getShoppingCart();
            } else {
                alert('删除该购物车商品失败！')
            }

        }).catch(err => {
            alert("购物车删除失败", "请稍后再试！")
        })

    })
    function plus(e, id) {
        var that = e.target
        var n = $(that).prev().val();
        var price = parseFloat($(that).parent().prev().text())
        var num = parseInt(n) + 1;
        if (num == 0) { return; }
        $(that).prev().val(num);
        $(that).parent().next().text(price * num)
        shoppingCartCount(id, num)
        getTotal();
        getCartCount();
    }
    /*购物车减*/
    function subtract(e, id) {
        var that = e.target
        var n = $(that).next().val();
        var price = parseFloat($(that).parent().prev().text())
        var num = parseInt(n) - 1;
        if (num == 0) { return }
        $(that).next().val(num);
        $(that).parent().next().text(price * num)
        shoppingCartCount(id, num)
        getTotal();
        getCartCount();
    }
    /**购物车数量加减*/
    function shoppingCartCount(id, count) {
        let params = {
            sale_count: count
        }
        page.updateShoppingCartCount(id, params).then(res => {

        }).catch(err => {
            alert('购物车数量修改--失败')
        })


    }
    /**直接修改购物车数据**/
    function getRowTotal(e) {
        var that = e.target;
        var n = $(that).val();
        var price = parseFloat($(that).parent().prev().text())
        $(that).parent().next().text(price * num)
        getTotal();
    }
    //计算总价和总数
    function getTotal() {
        let amount = 0;
        let count = 0;
        var price = 0;
        let total_count = 0;
        let total_amount = 0;
        let total = 0
        $('#cart_list li').each(function (index) {
            if ($(this).find('.checkboxs').prop("checked") == true) {
                count = parseInt($(this).find('.count_value').val());
                price = $(this).find('.prices').text();
                total_count += parseInt($(this).find('.count_value').val());
                total_amount += price * count;
                total = total_amount.toFixed(2)
            }
        })
        $('#total_count').text(total_count);
        $('#total_amount').text('￥' + total);
        $('#order_counts').text(total_count);
        $('#order_amounts').text('￥' + total);
    }
    /***删除购物车**/
    function deleteShoppingCart(id) {
        page.detalete(id).then(res => {
            if (res) {
                alert('购物车删除--成功！')
                getTotal();
                getCartCount();
                getCartDetails();
                getShoppingCart();
            }

        }).catch(err => {
            alert('购物车删除--失败')
        })

    }
    /***结算，显示获取地址列表***/
    function settleAccounts() {
        getCartResult();
        $("#product_container").css('display', 'none');
        $("#step").css('display', "block");
        $('#sure_order').css('display', "block");
        // $('#order_list').html($('#cart_list').html());
        // $('#order_count').text($('#total_count').text());
        // $('#order_amount').text($('#total_amount').text());
        $('#orders_details').css('display', "none");
        $("#pay_type").css('display', "none");
        getAddressList();
        getTotal();
    }
    //结算显示购物车详情
    function getCartResult() {
        var str = ''
        let total_count = 0;
        let total_amount = 0;
        let total = 0;
        page.getShoppingCart().then(res => {
            shopping_cart_id = res.shopping_cart_id
            if (res && res.length) {
                res.forEach((ele) => {
                    if (!ele.has_create_sale_contract && !res.goods_disabled) {
                        str += '<li class="commodity">' +
                            '<span class="checkboxes">' +
                            '</span>' +
                            '<div class="infors">' +
                            '<div class="lefts">' +
                            '</div>' +
                            '<div class="rights">' +
                            '<p class="rroduct_name">' + ele.norm_name + '</p>' +
                            '<p class="specification">' + ele.category_name + '</p>' +
                            '</div>' +
                            ' </div>' +
                            '<span class="prices">' + ele.sale_amount + '</span>' +
                            '<div class="numbers">' +
                            '<span class="count_value" style="border:none">' + ele.sale_count + '</span>' +
                            '</div>' +
                            '<span class="amount">' + ele.sale_amount * ele.sale_count + '</span>' +
                            '</li>'
                        total_count += ele.sale_count
                        total_amount += ele.sale_amount * ele.sale_count
                        toatl = total_amount.toFixed(2)
                    }

                });
                let arr = "";
                if (res && res.length) {
                    // arr = res[0].norm_name + "...>"
                    res.forEach(ele => {
                        if (!ele.has_create_sale_contract) {
                            sale_shopping_cart_ids_arr.push(ele.sale_shopping_cart_id)
                        }
                        arr += ele.norm_name
                    })
                }

                $('#order_list').html(str)
                $("#cart_number").text(total_count);
                $('#cart_amount').text(toatl);
                $('#order_count').text(total_count);
                $('#order_amount').text(toatl);
                $('#order_arr').text(arr + ' >');
            }

        }).catch(err => {
            alert('获取购物车详情--失败')
        })
    }
    /**获取购物车数量**/
    function getCartCount() {
        getCartDetails();
        page.getCartCount().then(res => {
            window.sessionStorage.count = res;
            let count = storage.getItem('count');
            if (!res) {
                $("#cart_total").text(0)
            } else {
                $("#cart_total").text(count)
            }
        }).catch(err => {

        })

    }
    page.getArea().then(res => {
        let str = "";
        if (res && res.length) {
            ProvinceList = res;
            for (var i = 0; i < res.length; i++) {
                str += '<option value=' + res[i].province_id + '>' + res[i].province_name + '</option>'
            }
        }
        $("#ProvinceList").val(res[0].province_id)
        $("#ProvinceList").html(str);
        getCity(res[0].province_id);

    })
    /**获取省市信息**/
    function getCity(index) {
        var city_list = [];
        for (var i = 0; i < ProvinceList.length; i++) {
            if (index == ProvinceList[i].province_id) {
                city_list = ProvinceList[i].city_list;
            }
        }
        let str = "";
        city_list.forEach(ele => {
            str += '<option value=' + ele.city_id + '>' + ele.city_name + '</option>'
        })
        $("#AreaList").html(str);
        getCounty(city_list[0].city_id);
        $("#AreaList").val(city_list[0].city_id)

    }
    /***获取区县**/
    function getCounty(id) {
        page.getCounty(id).then(res => {
            let str = "";
            if (res && res.length) {
                res.forEach(element => {
                    str += '<option value=' + element.county_id + '>' + element.county_name + '</option>'
                });
                $("#ContryList").val(res[0].county_id);
            } else {
                $("#ContryList").val(0);
            }

            $("#ContryList").html(str);
        })
    }
    /**获取用户地址列表**/
    var list1;
    var list2;
    var choose;
    function getAddressList() {
        var list = '';
        var str = "";
        list1 = "";
        list2 = "";
        choose = "";
        $('#addess_more').hide();
        $('#addess_close').hide();
        page.getAddressList().then(res => {
            shopping_cart_id = res.shopping_cart_id
            if (res && res.length) {
                if (res.length > 3) {
                    $('#addess_more').show();
                    for (var i = 0; i < 3; i++) {
                        list1 += '<div class="address_box" onclick="chooseAddress(event,' + res[i].user_address_id + ')">' +
                            '<div>' +
                            '<div class="address">' +
                            '<span class="city">' + res[i].province_name + res[i].city_name + '</span>' +
                            '<span class="user_name">' + res[i].consignee + '</span>' +
                            '<span class="edit" onclick="edit(' + res[i].user_address_id + ')">修改</span>' +
                            '<span class="delete" onclick="deleteAddress(' + res[i].user_address_id + ')">删除</span>' +
                            '</div>' +
                            '<div class="address_details">' +
                            res[i].address +
                            '</div>' +
                            '<div class="phone">' +
                            res[i].consignee_phone +
                            '</div>' +
                            '</div>' +
                            '</div>'
                    }
                    for (var i = 3; i < res.length; i++) {
                        list2 += '<div class="address_box" onclick="chooseAddress(event,' + res[i].user_address_id + ')">' +
                            '<div>' +
                            '<div class="address">' +
                            '<span class="city">' + res[i].province_name + res[i].city_name + '</span>' +
                            '<span class="user_name">' + res[i].consignee + '</span>' +
                            '<span class="edit" onclick="edit(' + res[i].user_address_id + ')">修改</span>' +
                            '<span class="delete" onclick="deleteAddress(' + res[i].user_address_id + ')">删除</span>' +
                            '</div>' +
                            '<div class="address_details">' +
                            res[i].address +
                            '</div>' +
                            '<div class="phone">' +
                            res[i].consignee_phone +
                            '</div>' +
                            '</div>' +
                            '</div>'
                    }
                } else {
                    res.forEach(ele => {
                        list1 += '<div class="address_box" onclick="chooseAddress(event,' + ele.user_address_id + ')">' +
                            '<div>' +
                            '<div class="address">' +
                            '<span class="city">' + ele.province_name + ele.city_name + '</span>' +
                            '<span class="user_name">' + ele.consignee + '</span>' +
                            '<span class="edit" onclick="edit(' + ele.user_address_id + ')">修改</span>' +
                            '<span class="delete" onclick="deleteAddress(' + ele.user_address_id + ')">删除</span>' +
                            '</div>' +
                            '<div class="address_details">' +
                            ele.address +
                            '</div>' +
                            '<div class="phone">' +
                            ele.consignee_phone +
                            '</div>' +
                            '</div>' +
                            '</div>'
                    });
                }

                address = res[0];
            }

            choose = list1 + '<div class="address_box addew">' +
                '<div class="add" onclick="creatAddeess()">' +
                '+ 使用新地址' +
                '</div>' +
                '</div>'
            $("#address_lists").html(choose);
            $('#address_lists').find('.address_box').first().addClass("active");
        }).catch(err => {
            alert('获取地址列表--失败')

        })
    }
    /**地址加载更多**/
    function addressMore() {
        choose = ""
        $("#address_lists").html('')
        choose = list1 + list2 + '<div class="address_box addew">' +
            '<div class="add" onclick="creatAddeess()">' +
            '+ 使用新地址' +
            '</div>' +
            '</div>'
        $("#address_lists").html(choose)
        $('#addess_more').hide();
        $('#addess_close').show();
    }
    /**地址***/
    function addressClose() {
        choose = "";
        $("#address_lists").html('');
        choose = list1 + '<div class="address_box addew">' +
            '<div class="add" onclick="creatAddeess()">' +
            '+ 使用新地址' +
            '</div>' +
            '</div>'
        $("#address_lists").html(choose)
        $('#addess_more').show();
        $('#addess_close').hide();
    }
    /***创建新地址**/
    function creatAddeess() {
        isAddressEdit = false;
        modalOpen();
    }
    /*添加地址**/
    function addAddress() {
        if ($("#ProvinceList").val() == '' || $("#AreaList").val() == '' || $("#ContryList").val() == '' || $("#consignee").val() == '' || $("#consignee_phone").val() == '' || $("#address").val() == '' || $("#is_default").val() == '') {
            alert("信息不全，请补充");
            return
        }
        if ($("#address").val().length < 6) {
            alert("地址长度必须大于6位");
            return
        }
        let params = {
            province_id: $("#ProvinceList").val(),
            city_id: $("#AreaList").val(),
            county_id: $("#ContryList").val(),
            consignee: $("#consignee").val(),
            consignee_phone: $("#consignee_phone").val(),
            address: $("#address").val(),
            is_default: $("#is_default").prop("checked")
        }
        if (isAddressEdit) {//编辑
            page.updateAddress(checkRows.user_address_id, params).then(res => {
                alert("地址修改成功！")
                getAddressList();
                $('#modal-box').css("display", 'none');
                $("#consignee").val(''),
                    $("#consignee_phone").val(''),
                    $("#address").val(''),
                    $("#is_default").prop("checked", false)
            }).catch(err => {
                alert("修改地址信息失败！")
            })

        } else {//新增
            page.addAddress(params).then(res => {
                alert("地址添加成功！")
                getAddressList();
                $('#modal-box').css("display", 'none');
                $("#consignee").val(''),
                    $("#consignee_phone").val(''),
                    $("#address").val(''),
                    $("#is_default").prop("checked", false)
            }).catch(err => {
                alert("添加地址信息失败！")
            })

        }

    }
    /*删除/修改地址*/
    var checkRows;
    var checkRowsId;
    function deleteAddress(id) {
        checkRowsId = id;
        $('#delete_box').show();
        popCenterWindow();
    }
    /**删除*/
    function deleteRow() {

        page.delateAddress(checkRowsId).then(res => {
            alert("删除地址信息成功！");
            getAddressList();
            cancleAddress();
        }).catch(err => {
            alert("删除地址信息失败！")
        })

    }
    /**取消删除*/
    function cancleAddress() {
        $('#delete_box').hide();
        checkRows = '';
    }
    /**修改地址**/
    function edit(id) {
        let ids = id;
        isAddressEdit = true;
        //checkRows = row;
        page.getUserAddress(id).then(res => {
            if (res) {
                checkRows = res;
                modalOpen();
                isAddressEdit = true;
                $("#ProvinceList").val(res.province_id);
                $("#AreaList").val(res.city_id);
                $("#ContryList").val(res.county_id);
                $("#consignee").val(res.consignee);
                $("#consignee_phone").val(res.consignee_phone);
                $("#address").val(res.address);
                $("#is_default").prop("checked", res.is_default)

            }
        }).catch(err => {
            alert('获取地址列表--失败')
        })
    }
    /**选择地址*/
    function chooseAddress(e, id) {
        var that = e.target;
        page.getUserAddress(id).then(res => {
            address = res
        }).catch(err => {

        })
        $(that).parents(".address_box").addClass("active");
        $(that).parents(".address_box").siblings().removeClass('active')
    }
    //获取窗口的高度
    var windowHeight;
    //获取窗口的宽度
    var windowWidth;
    //获取弹窗的宽度
    var popWidth;
    //获取弹窗高度
    var popHeight;
    //定义弹出居中窗口的方法
    function popCenterWindow() {
        windowHeight = $(window).height();
        windowWidth = $(window).width();
        //首页结算弹框
        popHeight = $(".delete_model").height();
        popWidth = $(".delete_model").width();
        //计算弹出窗口的左上角X的偏移量
        var popX = (windowWidth - popWidth) / 2;
        // 计算弹出窗口的左上角Y的偏移量为窗口的高度 - 弹窗高度 / 2 + 被卷去的页面的top
        var popY = (windowHeight - popHeight) / 2 + $(document).scrollTop();
        //设定窗口的位置
        $(".delete_model").css("top", popY);
        $(".delete_model").css("left", popX);
    }
    /**设为默认地址*/
    function setDefualt() {
        page.addDefault(ids).then(res => {
            alert('设为默认地址--成功')
        }).catch(err => {
            alert('设为默认地址--失败')
        })

    }
    /**提交订单***/
    function submitOrder() {
        step = 2;
        getShoppingCart();
        let params = {
            sale_shopping_cart_ids: sale_shopping_cart_ids_arr,
            user_address_id: address.user_address_id
        }
        page.submitOrder(params).then(res => {
            alert('提交订单--成功');
            reference_number = res.data.sale_contract_id;
            amount = res.data.sale_amount
            $('#sure_order').css('display', "none");
            $('#orders_details').css('display', "block");
            $("#pay_type").css('display', "block");
            getPayType();
            changCurrten(2)
        }).catch(err => {
            alert('提交订单--失败')
        })

    }
    /**返回购物车**/
    function back() {
        window.location.reload()
    }
    /**获取支付方式**/
    function getPayType() {
        let params = {
            app_type: "ClientApp",
            order_type: 'Shopping',
            os_type: 'Windows'
        }
        var str = ''
        page.getPayType(params).then(res => {
            if (res && res.length) {
                res.forEach(ele => {
                    str += '<li class="types">' +
                        '<img src="' + ele.logo + '" alt="' + ele.name + '">' +
                        '<span class="ali">' + ele.name + '</span>' +
                        '<input type="radio" name="pay_type" value="' + ele.channel_id + '" onclick="choosePayType(event)">' +
                        '</li>'
                })
                $('#payType').html(str);
                $('#payType').find('.types').eq(1).find('input').attr("checked", true)
                choosePayTypes($('#payType').find('.types').eq(1).find('input').val())
            } else {
                alert("获取支付方式失败")
            }

        })
    }
    var time;
    /**选择支付方式**/
    function choosePayType(e) {
        channel_id = e.target.value
        let type = e.target.value;
        let params = {
            app_type: "WebsiteApp",
            reference_number: reference_number,
            amount: amount,
            channel_type: type,
            os_type: "Windows",
            device_type: 'Web',
            device_id: "string",
            parameters: {},
            payer: "Customer"
        }
        var str = ''
        page.getCode(params).then(res => {
            if (res && res.data) {
                $('#pay_code').html('');
                $('#pay_code').qrcode({ width: 130, height: 130, text: res.data.qr_url });
                payment_record_id = res.data.out_trade_no
                time = setInterval(function () { getPaymentResult(payment_record_id) }, 10000)
            } else {
                clearInterval(time);
                alert('获取支付二维码--失败')
            }

        }).catch(err => {
            clearInterval(time);
            alert('获取支付二维码--失败')
        })

    }
    //获取默认的支付方式
    function choosePayTypes(e) {
        let params = {
            app_type: "WebsiteApp",
            reference_number: reference_number,
            amount: amount,
            channel_type: e,
            os_type: "Windows",
            device_type: 'Web',
            device_id: "string",
            parameters: {},
            payer: "Customer"
        }
        var str = ''
        page.getCode(params).then(res => {
            clearInterval(time);
            if (res && res.data) {
                $('#pay_code').html('');
                $('#pay_code').qrcode({ width: 130, height: 130, text: res.data.qr_url });
                payment_record_id = res.data.out_trade_no
                time = setInterval(function () { getPaymentResult(payment_record_id) }, 10000)
            } else {
                clearInterval(time);
                alert('获取支付二维码--失败')
            }
        }).catch(err => {
            clearInterval(time);
            alert('获取支付二维码--失败')
        })

    }
    //获取支付结果
    function getPaymentResult(id) {
        page.getPayResult(id).then(res => {
            if (res && res.status == 'Success') {
                alert("支付成功！")
                step = 3
                $("#success").css('display', "block");
                $('#orders_details').css('display', "none");
                $("#pay_type").css('display', "none");
                window.clearInterval(time);
                changCurrten(3)
            }
        }).catch(err => {
        })
    }
    //页面进度步骤显示
    function changCurrten(step) {
        for (var i = 0; i < step; i++) {
            $('#current').find('li').siblings().eq(i).find('.stepnumber').parent().addClass("active")
        }
    }
    /**支付完成**/
    function finishPay() {
        step = 4
        changCurrten(4)
        alert("订单已完成,自动跳转至产品页选购商品！")
        window.location = "product.html"
    }
    //获取购物车记录
    function getCartDetails() {
        console.log(66666)
        page.getCartDetails().then(res => {
            console.log(res, 89898898);
            if (res) {
                let goodscount = 0;
                let goodstotal = 0
                str = "";
                if (res.length && (res.length < 3 || res.length == 3)) {
                    res.forEach(ele => {
                        goodscount += parseInt(ele.sale_count);
                        goodstotal += parseFloat(ele.sale_amount) * parseInt(ele.sale_count);
                        str += '<li onclick="goodsDetails(' + ele.sale_goods_id + ')"><span>' + ele.norm_name + '</span><span>' + ele.sale_count + '件' + '</span></li>';
                    })
                }
                if (res.length && res.length > 3) {
                    for (var i = 0; i < 3; i++) {
                        goodscount += parseInt(res[i].sale_count);
                        goodstotal += parseFloat(res[i].sale_amount) * parseInt(res[i].sale_count);
                        str += '<li><span class="goods_names">' + res[i].norm_name + '</span><span class="goods_p">' + res[i].sale_count + '件' + '</span></li>';
                    }
                    str = str + "<li>···</li>"
                }
                console.log(goodscount, goodstotal)
                console.log(str)
                window.sessionStorage.goodscount = goodscount;
                window.sessionStorage.goodstotal = goodstotal;
                window.sessionStorage.cartDetails = str;
                $("#goods_count").text(goodscount);
                $("#goods_amount").text(goodstotal);
                $('#cart').html(str);
            }
        }).catch(err => {
            alert('获取购物车详情--失败')
        })
    }
</script>

</html>
